<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>饼图</title>
	</head>
	<body>
		<div id="main" style="width: 500px;height: 400px;"></div>
		<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.min.js"></script>
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById("main"));
			var option = {
				title:{
					text:"某站点用户访问来源",
					subtext:"纯属虚构",
					x:"center"
				},
				tooltip:{
					trigger:"item",//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
					//弹窗内容样式，{a}表示系列名称<br/>换行，{b}:{c}系列名称：数值，({d}%)系列所占比例
					formatter:"{a}<br/>{b}:{c} ({d}%)"
				},
				legend:{
					orient:"vertical",
					left:"left",
					data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','直接访问1','邮件营销1','联盟广告1','视频广告1','搜索引擎1']
				},
				series:[
					{
						name:"访问来源",
						type:'pie',		//饼状图
						radius:"55%",	//半径
						center:['50%','60%'],//圆心位置
						data:[
							{value:335,name:"直接访问"},
							{value:310,name:"邮件营销"},
							{value:234,name:"联盟广告"},
							{value:135,name:"视频广告"},
							{value:1548,name:"搜索引擎"}
						]
					}
				]
			}
			myCharts.setOption(option);
		</script>
	</body>
</html>
